<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo $t['siteTitle']; ?></title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#7E22CE', // 主色调：深紫色，传达奇幻与神秘
            secondary: '#F59E0B', // 辅助色：金色，用于强调和CTA
            dark: '#0F172A', // 深色背景
            light: '#F8FAFC', // 浅色文本
            accent: '#10B981', // 强调色：亮绿色，用于特殊元素
          },
          fontFamily: {
            fantasy: ['Segoe UI', 'Roboto', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.8);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
  </style>
</head>
<body class="bg-dark text-light font-fantasy overflow-x-hidden">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full z-50 transition-all duration-300">
    <nav class="container mx-auto px-4 py-4 flex justify-between items-center bg-dark/70 bg-blur">
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
          <i class="fa fa-gamepad text-2xl"></i>
        </div>
        <span class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">
            <?php echo $t['siteTitle']; ?>
        </span>
      </a>
      
      <!-- 桌面导航 -->
      <div class="hidden md:flex items-center space-x-8">
        <?php foreach($t['nav'] as $item): ?>
          <?php if(isset($item['isCta']) && $item['isCta']): ?>
            <a href="<?php echo $item['link']; ?>" class="bg-secondary hover:bg-secondary/80 text-dark font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
              <?php echo $item['name']; ?>
            </a>
          <?php else: ?>
            <a href="<?php echo $item['link']; ?>" class="hover:text-secondary transition-colors">
              <?php echo $item['name']; ?>
            </a>
          <?php endif; ?>
        <?php endforeach; ?>
        
        <!-- 语言选择器 -->
        <div class="relative group">
          <button class="flex items-center space-x-1 hover:text-secondary transition-colors">
            <i class="fa fa-globe"></i>
            <span><?php echo $t['lang'][$lang]; ?></span>
            <i class="fa fa-angle-down text-xs"></i>
          </button>
          <div class="absolute right-0 mt-2 w-32 bg-dark/90 bg-blur rounded-lg shadow-lg border border-primary/20 overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
            <?php foreach($availableLangs as $availableLang): ?>
              <?php if($availableLang != $lang): ?>
                <a href="?lang=<?php echo $availableLang; ?>" class="block px-4 py-2 hover:bg-primary/20 transition-colors">
                  <?php echo $t['lang'][$availableLang]; ?>
                </a>
              <?php endif; ?>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <button id="menu-toggle" class="md:hidden text-2xl">
        <i class="fa fa-bars"></i>
      </button>
    </nav>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-dark/95 bg-blur">
      <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
        <?php foreach($t['nav'] as $item): ?>
          <?php if(isset($item['isCta']) && $item['isCta']): ?>
            <a href="<?php echo $item['link']; ?>" class="bg-secondary hover:bg-secondary/80 text-dark font-bold py-3 px-6 rounded-full text-center transition-all">
              <?php echo $item['name']; ?>
            </a>
          <?php else: ?>
            <a href="<?php echo $item['link']; ?>" class="py-2 hover:text-secondary transition-colors">
              <?php echo $item['name']; ?>
            </a>
          <?php endif; ?>
        <?php endforeach; ?>
        
        <!-- 移动端语言选择器 -->
        <div class="pt-2 border-t border-primary/20">
          <p class="text-light/60 mb-2">
            <?php 
            // 语言选择提示，保持中日英三国语言显示
            echo '选择语言 / Select Language / 言語を選択'; 
            ?>
          </p>
          <div class="flex flex-wrap gap-3">
            <?php foreach($availableLangs as $availableLang): ?>
              <a href="?lang=<?php echo $availableLang; ?>" class="px-4 py-2 rounded-lg <?php echo $availableLang == $lang ? 'bg-primary/30' : 'bg-dark/50 hover:bg-primary/20'; ?> transition-colors">
                <?php echo $t['lang'][$availableLang]; ?>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
      <!-- 背景视频/图片 -->
      <div class="absolute inset-0 z-0">
        <div class="absolute inset-0 bg-gradient-to-b from-dark/40 via-dark/60 to-dark z-10"></div>
        <img src="https://picsum.photos/id/156/1920/1080" alt="<?php 
          switch($lang) {
              case 'zh': echo '游戏场景展示'; break;
              case 'en': echo 'Game scene display'; break;
              case 'ja': echo 'ゲーム場面展示'; break;
          }
        ?>" class="w-full h-full object-cover">
      </div>
      
      <!-- 英雄内容 -->
      <div class="container mx-auto px-4 z-20 text-center">
        <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-6 leading-tight text-shadow-lg animate-fade-in">
          <?php echo $t['hero']['title']; ?>
        </h1>
        <p class="text-[clamp(1rem,3vw,1.5rem)] max-w-3xl mx-auto mb-10 text-shadow">
          <?php echo $t['hero']['subtitle']; ?>
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="bg-secondary hover:bg-secondary/80 text-dark font-bold py-3 px-10 rounded-full text-lg transition-all transform hover:scale-105 hover:shadow-lg">
            <?php echo $t['hero']['cta1']['text']; ?>
          </a>
          <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="bg-transparent border-2 border-light hover:border-secondary hover:text-secondary font-bold py-3 px-10 rounded-full text-lg transition-all flex items-center justify-center gap-2">
            <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i> <?php echo $t['hero']['cta2']['text']; ?>
          </a>
        </div>
        
        <!-- 向下滚动指示 -->
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
          <a href="#features" class="text-light/70 hover:text-light transition-colors">
            <i class="fa fa-angle-down text-3xl"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 游戏特色 -->
    <section id="features" class="py-20 bg-gradient-to-b from-dark to-dark/95">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4"><?php echo $t['features']['title']; ?></h2>
          <p class="text-light/70 max-w-2xl mx-auto text-lg"><?php echo $t['features']['subtitle']; ?></p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <?php foreach($t['features']['items'] as $feature): ?>
            <div class="bg-dark/50 backdrop-blur-sm rounded-xl p-8 border border-primary/20 hover:border-primary/50 transition-all transform hover:-translate-y-2 hover:shadow-lg hover:shadow-primary/10">
              <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mb-6">
                <i class="fa <?php echo $feature['icon']; ?> text-2xl text-primary"></i>
              </div>
              <h3 class="text-2xl font-bold mb-4"><?php echo $feature['title']; ?></h3>
              <p class="text-light/70"><?php echo $feature['desc']; ?></p>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </section>

    <!-- 角色介绍 -->
    <section id="characters" class="py-20 bg-dark relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute top-0 left-0 w-full h-full opacity-10">
        <div class="absolute top-10 left-10 w-64 h-64 rounded-full bg-primary blur-3xl"></div>
        <div class="absolute bottom-10 right-10 w-80 h-80 rounded-full bg-secondary blur-3xl"></div>
      </div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4"><?php echo $t['characters']['title']; ?></h2>
          <p class="text-light/70 max-w-2xl mx-auto text-lg"><?php echo $t['characters']['subtitle']; ?></p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <?php foreach($t['characters']['items'] as $character): ?>
            <div class="group">
              <div class="relative overflow-hidden rounded-xl mb-4">
                <img src="<?php echo $character['image']; ?>" alt="<?php echo $character['alt']; ?>" class="w-full h-80 object-cover object-center transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-70"></div>
                <div class="absolute bottom-4 left-4 right-4">
                  <h3 class="text-xl font-bold"><?php echo $character['name']; ?></h3>
                  <p class="text-light/80 text-sm"><?php echo $character['class']; ?></p>
                </div>
              </div>
              <p class="text-light/70 text-center"><?php echo $character['desc']; ?></p>
            </div>
          <?php endforeach; ?>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-flex items-center gap-2 text-secondary hover:text-secondary/80 font-medium transition-colors">
            <?php echo $t['characters']['moreLink']; ?> <i class="fa fa-long-arrow-right"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 游戏截图 -->
    <section id="screenshots" class="py-20 bg-gradient-to-b from-dark/95 to-dark">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4"><?php echo $t['screenshots']['title']; ?></h2>
          <p class="text-light/70 max-w-2xl mx-auto text-lg"><?php echo $t['screenshots']['subtitle']; ?></p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <?php foreach($t['screenshots']['items'] as $screenshot): ?>
            <div class="group relative overflow-hidden rounded-xl cursor-pointer">
              <img src="<?php echo $screenshot['image']; ?>" alt="<?php echo $screenshot['alt']; ?>" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-primary/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                <i class="fa fa-search-plus text-4xl"></i>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-block bg-transparent border-2 border-primary hover:bg-primary/10 text-light font-bold py-3 px-8 rounded-full transition-all">
            <?php echo $t['screenshots']['moreLink']; ?>
          </a>
        </div>
      </div>
    </section>

    <!-- 游戏预告片 -->
    <section id="trailer" class="py-20 bg-dark relative">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4"><?php echo $t['trailer']['title']; ?></h2>
          <p class="text-light/70 max-w-2xl mx-auto text-lg"><?php echo $t['trailer']['subtitle']; ?></p>
        </div>
        
        <div class="max-w-4xl mx-auto">
          <div class="relative rounded-xl overflow-hidden aspect-video bg-dark/50 border border-primary/30 group cursor-pointer">
            <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-dark/40 flex items-center justify-center">
              <div class="w-20 h-20 rounded-full bg-secondary flex items-center justify-center transform transition-transform group-hover:scale-110">
                <i class="fa fa-play text-2xl text-dark pl-1"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新动态 -->
    <section id="news" class="py-20 bg-gradient-to-b from-dark to-dark/95">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4"><?php echo $t['news']['title']; ?></h2>
          <p class="text-light/70 max-w-2xl mx-auto text-lg"><?php echo $t['news']['subtitle']; ?></p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <?php foreach($t['news']['items'] as $newsItem): ?>
            <article class="bg-dark/50 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 hover:border-primary/40 transition-all transform hover:-translate-y-1">
              <img src="<?php echo $newsItem['image']; ?>" alt="<?php echo $newsItem['title']; ?>" class="w-full h-48 object-cover">
              <div class="p-6">
                <div class="flex items-center text-sm text-light/60 mb-3">
                  <span class="flex items-center"><i class="fa fa-calendar-o mr-2"></i> <?php echo $newsItem['date']; ?></span>
                  <span class="mx-3">•</span>
                  <span class="flex items-center"><i class="fa fa-tag mr-2"></i> <?php echo $newsItem['category']; ?></span>
                </div>
                <h3 class="text-xl font-bold mb-3 hover:text-secondary transition-colors">
                  <a href="#"><?php echo $newsItem['title']; ?></a>
                </h3>
                <p class="text-light/70 mb-4"><?php echo $newsItem['desc']; ?></p>
                <a href="#" class="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-colors">
                  <?php echo $t['readMore']; ?> <i class="fa fa-angle-right ml-1"></i>
                </a>
              </div>
            </article>
          <?php endforeach; ?>
        </div>
        
        <div class="text-center mt-12">
          <a href="#" class="inline-block bg-transparent border-2 border-primary hover:bg-primary/10 text-light font-bold py-3 px-8 rounded-full transition-all">
            <?php echo $t['news']['moreLink']; ?>
          </a>
        </div>
      </div>
    </section>

    <!-- 预注册区域 -->
    <section id="pre-register" class="py-20 bg-gradient-to-r from-primary/20 to-secondary/20 relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute top-0 left-0 w-full h-full opacity-20">
        <div class="absolute -top-40 -left-40 w-96 h-96 rounded-full bg-primary blur-3xl"></div>
        <div class="absolute -bottom-40 -right-40 w-96 h-96 rounded-full bg-secondary blur-3xl"></div>
      </div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-6"><?php echo $t['preRegister']['title']; ?></h2>
          <p class="text-xl text-light/80 mb-10 max-w-2xl mx-auto">
            <?php echo $t['preRegister']['subtitle']; ?>
          </p>
          
          <form class="max-w-xl mx-auto bg-dark/70 backdrop-blur-sm p-8 rounded-2xl border border-primary/30">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <label for="name" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['name']; ?></label>
                <input type="text" id="name" class="w-full bg-dark/50 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>">
              </div>
              <div>
                <label for="phone" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['phone']; ?></label>
                <input type="tel" id="phone" class="w-full bg-dark/50 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>">
              </div>
            </div>
            
            <div class="mb-6">
              <label for="email" class="block text-left text-sm text-light/70 mb-1"><?php echo $t['preRegister']['form']['email']; ?></label>
              <input type="email" id="email" class="w-full bg-dark/50 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>">
            </div>
            
            <div class="flex items-start mb-6">
              <input type="checkbox" id="agreement" class="mt-1 mr-3">
              <label for="agreement" class="text-sm text-light/70 text-left">
                <?php echo $t['preRegister']['form']['agreement']; ?>
              </label>
            </div>
            
            <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-dark font-bold py-4 px-6 rounded-lg text-lg transition-all transform hover:scale-[1.02] hover:shadow-lg hover:shadow-secondary/20">
              <?php echo $t['preRegister']['form']['submit']; ?>
            </button>
          </form>
          
          <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6">
            <?php foreach($t['preRegister']['stats'] as $stat): ?>
              <div class="bg-dark/50 backdrop-blur-sm p-6 rounded-xl border border-primary/20">
                <div class="text-3xl font-bold text-secondary mb-2"><?php echo $stat['value']; ?></div>
                <div class="text-light/70"><?php echo $stat['label']; ?></div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark pt-16 pb-8 border-t border-primary/20">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
              <i class="fa fa-gamepad text-2xl"></i>
            </div>
            <span class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">
               <?php echo $t['siteTitle'];?>
            </span>
          </div>
          <p class="text-light/70 mb-6">
            <?php echo $t['footer']['description']; ?>
          </p>
          <div class="flex space-x-4">
            <?php 
            $socialIcons = [
              ['icon' => 'fa-weibo', 'link' => '#'],
              ['icon' => 'fa-wechat', 'link' => '#'],
              ['icon' => 'fa-bilibili', 'link' => '#'],
              ['icon' => 'fa-youtube-play', 'link' => '#']
            ];
            foreach($socialIcons as $social): ?>
              <a href="<?php echo $social['link']; ?>" class="w-10 h-10 rounded-full bg-dark/50 border border-primary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                <i class="fa <?php echo $social['icon']; ?>"></i>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
        
        <?php foreach($t['footer']['links'] as $linkGroup): ?>
          <div>
            <h4 class="text-lg font-bold mb-6"><?php echo $linkGroup['title']; ?></h4>
            <ul class="space-y-3">
              <?php foreach($linkGroup['items'] as $link): ?>
                <li><a href="<?php echo $link['link']; ?>" class="text-light/70 hover:text-secondary transition-colors"><?php echo $link['name']; ?></a></li>
              <?php endforeach; ?>
            </ul>
          </div>
        <?php endforeach; ?>
        
        <div>
          <h4 class="text-lg font-bold mb-6"><?php echo $t['footer']['subscribe']; ?></h4>
          <p class="text-light/70 mb-4"><?php echo $t['footer']['subscribeDesc']; ?></p>
          <form class="flex mb-4">
            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" class="flex-1 bg-dark/50 border border-primary/30 rounded-l-lg px-4 py-2 text-light focus:outline-none focus:border-secondary transition-colors">
            <button type="submit" class="bg-primary hover:bg-primary/80 text-light px-4 py-2 rounded-r-lg transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </form>
          <p class="text-xs text-light/50">
            <?php echo $t['footer']['privacyNote']; ?>
          </p>
        </div>
      </div>
      
      <div class="pt-8 border-t border-primary/10 flex flex-col md:flex-row justify-between items-center">
        <div class="text-light/50 text-sm mb-4 md:mb-0">
          <?php echo $t['footer']['copyright']; ?>
        </div>
        <div class="flex space-x-6">
          <?php foreach($t['footer']['legalLinks'] as $legalLink): ?>
            <a href="<?php echo $legalLink['link']; ?>" class="text-light/50 hover:text-light/80 text-sm transition-colors"><?php echo $legalLink['name']; ?></a>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary hover:bg-primary/80 text-light flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
    <i class="fa fa-angle-up text-xl"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    const backToTop = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', function() {
      if (window.scrollY > 100) {
        navbar.classList.add('py-2', 'bg-dark/90', 'shadow-lg');
        navbar.classList.remove('py-4', 'bg-dark/70');
        
        backToTop.classList.remove('opacity-0', 'invisible');
        backToTop.classList.add('opacity-100', 'visible');
      } else {
        navbar.classList.add('py-4', 'bg-dark/70');
        navbar.classList.remove('py-2', 'bg-dark/90', 'shadow-lg');
        
        backToTop.classList.add('opacity-0', 'invisible');
        backToTop.classList.remove('opacity-100', 'visible');
      }
    });
    
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
      const icon = menuToggle.querySelector('i');
      if (icon.classList.contains('fa-bars')) {
        icon.classList.replace('fa-bars', 'fa-times');
      } else {
        icon.classList.replace('fa-times', 'fa-bars');
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 关闭移动菜单（如果打开）
        if (!mobileMenu.classList.contains('hidden')) {
          mobileMenu.classList.add('hidden');
          const icon = menuToggle.querySelector('i');
          icon.classList.replace('fa-times', 'fa-bars');
        }
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
        }
      });
    });
    
    // 返回顶部按钮
    backToTop.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>
